<!-- 
  * 交易流水详情 -->

<template>
  <a-modal
    :width="1000"
    :open="openForm"
    @cancel="onReplyModalClose"
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="onReplySubmit"
    :getContainer="getContainer"
    :footer="false"
  >
    <template #title>
      <div class="flex justify-between">
        <div>详情</div>
      </div>
    </template>
    <group-title class="pb-0.5">基本信息</group-title>
    <a-descriptions :column="2">
      <a-descriptions-item v-for="item in detailConfig.filter((e) => !e.hide)" :key="item.dataIndex" :label="item.label" v-bind="item.options">{{
        item?.customRender ? item.customRender(formData) : formData[item.dataIndex]
      }}</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, nextTick, computed, watch, getCurrentInstance, h } from 'vue'
  import { message } from 'ant-design-vue'
  import { orderApi } from '/@/api/business/b-operation/order/order-api'
  import { orderApi as agentOrderApi } from '/@/api/business/b-agent/order/order-api'
  import { orderApi as merchantOrderApi } from '/@/api/business/b-merchant/order/order-api'
  import { SmartLoading } from '/@/components/framework/smart-loading'
  import { getObjValue, setObjValue, formatToMoney, strToArr, selectDictLabel } from '/@/utils/common.js'
  import dayjs from 'dayjs'
  import { cloneDeep, isEmpty } from 'lodash-es'
  import {
    TRADE_STATUS, //交易状态
    ALLOC_STATUS, //分账状态
    ZZB_PAY_WAY,
    ZZB_CHANNEL_TYPE,
    ZZB_PAY_TYPE,
  } from '/@/constants/dict'

  import { useUserStore } from '/@/store/modules/system/user'
  const USER_TYPE = useUserStore().userType // 用户类型: 1-平台;2-代理;4-商户

  const { proxy } = getCurrentInstance()
  // ------------------------ 事件 ------------------------

  const apiSource = {
    detail: (data) => {
      if (USER_TYPE == '1') return orderApi.findId(data)
      if (USER_TYPE == '2') return agentOrderApi.findId(data)
      if (USER_TYPE == '4') return merchantOrderApi.findId(data)
    },
  }

  const props = defineProps({
    open: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => {},
    },
  })

  const detailConfig = ref([
    {
      label: '通道名称',
      dataIndex: 'channelName',
    },
    {
      label: '公司名称',
      dataIndex: 'channelCompanyName',
    },
    {
      label: '商户名称',
      dataIndex: 'merchantName',
    },
    {
      label: '商家账户/商户号',
      dataIndex: 'channelMchid',
    },
    {
      label: '通道类型',
      dataIndex: 'channelType',
      customRender: (data) => selectDictLabel(ZZB_CHANNEL_TYPE, data.channelType),
    },
    {
      label: '所属代理',
      dataIndex: 'agentName',
      hide: USER_TYPE != '1',
    },
    {
      label: '交易订单号',
      dataIndex: 'id',
    },
    {
      label: '支付订单号',
      dataIndex: 'oId',
    },
    {
      label: '渠道订单号',
      dataIndex: 'tId',
    },
    {
      label: '门店名称',
      dataIndex: 'storeAbbrName',
    },
    {
      label: '订单金额',
      dataIndex: 'tradeAmt',
      customRender: (data) => formatToMoney(data.tradeAmt / 100),
    },
    {
      label: '预估交易手续费',
      dataIndex: 'estimatedFee',
      customRender: (data) => formatToMoney(data.estimatedFee / 100),
    },
    {
      label: '实际手续费',
      dataIndex: 'fee',
      customRender: (data) => formatToMoney(data.fee / 100),
    },
    {
      label: '退款金额',
      dataIndex: 'refundAmt',
      customRender: (data) => formatToMoney(data.refundAmt / 100),
    },
    {
      label: '实际分账金额',
      dataIndex: 'allocAmt',
      customRender: (data) => formatToMoney(data.allocAmt / 100),
    },
    {
      label: '结算金额',
      dataIndex: 'settleAmt',
      customRender: (data) => formatToMoney(data.settleAmt / 100),
    },
    {
      label: '实收金额',
      dataIndex: 'paidUpAmt',
      customRender: (data) => formatToMoney(data.paidUpAmt / 100),
    },
    {
      label: '营收金额',
      dataIndex: 'revenueAmt',
      customRender: (data) => formatToMoney(data.revenueAmt / 100),
    },
    {
      label: '产品名称',
      dataIndex: 'productName',
    },
    {
      label: '支付方式',
      dataIndex: 'payWay',
      customRender: (data) => selectDictLabel(ZZB_PAY_WAY, data.payWay),
    },
    {
      label: '交易类型',
      dataIndex: 'payType',
      customRender: (data) => selectDictLabel(ZZB_PAY_TYPE, data.payType),
    },
    {
      label: '商家费率',
      dataIndex: 'rate',
      customRender: (data) => (data.payType == 0 ? data.onlineRate : data.offlineRate),
    },
    {
      label: '商品描述',
      dataIndex: 'body',
    },
    {
      label: '订单标题',
      dataIndex: 'subject',
    },
    {
      label: '是否退款',
      dataIndex: 'complaintFullRefunded',
      customRender: (data) => (data.refundAmt != 0 ? '是' : '否'),
    },
    {
      label: '交易状态',
      dataIndex: 'status',
      customRender: (data) => selectDictLabel(TRADE_STATUS, data.status),
    },
    {
      label: '分账状态',
      dataIndex: 'allocStatus',
      customRender: (data) => selectDictLabel(ALLOC_STATUS, data.allocStatus),
    },
    {
      label: '交易报错原因',
      dataIndex: 'channelError',
    },
    {
      label: '创建时间',
      dataIndex: 'cTime',
      customRender: (data) => dayjs(data.cTime).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      label: '备注',
      dataIndex: 'userRemark',
    },
  ])

  const emit = defineEmits(['update:open', 'ok'])
  const openForm = computed({ get: () => props.open, set: (val) => emit('update:open', val) })

  // ------------------------ 显示与隐藏 ------------------------
  // 回复用户弹窗相关
  const infoForm = {
    tradeAmt: undefined, //交易金额
    orderType: undefined, //订单类型(0:支付;1:分账;2:代收)
    subject: undefined, //商品标题
    settleAmt: undefined, //结算金额
    fee: undefined, //手续费（分）
    payWay: undefined, //支付方式，详情见数据字典
    exhibitionId: undefined, //所属展业人员编号
    channelType: undefined, //通道类型
    cTime: undefined, //订单创建时间
    onlineRate: undefined, //商户线上费率
    body: undefined, //商品描述信息
    oAgentId: undefined, //所属服务商编号
    deviceId: undefined, //收款设备编号
    storeStaffId: undefined, //门店店员编号
    channelMchid: undefined, //商户号
    productName: undefined, //产品名称
    pAgentId: undefined, //一级服务商编号
    merchantName: undefined, //商户名称
    payType: undefined, //交易类型(0:线上;1:线下)
    merchantId: undefined, //商户编号
    fTime: undefined, //订单完成时间
    id: undefined, //订单编号(订单号)
    allocAmt: undefined, //分账金额（分）
    channelId: undefined, //通道编号
    refundAmt: undefined, //退款金额
    deviceType: undefined, //收款设备类型(0:码牌;1:POS机)
    revenueAmt: undefined, //营收金额（分）
    allocStatus: undefined, //分账状态：0不分账，1分账中，2分账完结
    channelCompanyName: undefined, //通道公司名称
    agentName: undefined, //代理名称
    mId: undefined, //商户订单号
    payUserId: undefined, //付款用户标识
    offlineRate: undefined, //商户线下费率
    oId: undefined, //官方订单号
    storeId: undefined, //门店编号
    payAccType: undefined, //付款账户类型(0:借记卡;1:贷记卡;2:支付宝;3:微信)
    tId: undefined, //三方机构订单号
    storeAbbrName: undefined, //门店简称
    sceneType: undefined, //付款场景类型，详情见数据字典
    paidUpAmt: undefined, //实收金额（分）
    storeStaffName: undefined, //门店店员名称
    channelName: undefined, //通道名称
    channelError: undefined, //错误信息
    status: undefined, //订单状态(0:支付中;1:支付完成;2:支付失败;3:撤单;4:关单;5:退款)
  }
  const formData = ref(cloneDeep(infoForm))
  // 获取表单信息
  async function getFormInfo(data) {
    console.log('详情===》')
    SmartLoading.show()
    try {
      let res = await apiSource.detail({ id: data.id })
      if (res.code === 200) {
        formData.value = res.data
      }
    } catch (error) {
      console.error(error)
    }
    SmartLoading.hide()
  }
  // 是否显示
  function show(rowData) {
    getFormInfo(rowData)
  }
  function onReplyModalClose() {
    formData.value = cloneDeep(infoForm)
    openForm.value = false
  }

  defineExpose({
    show,
  })
  watch(
    [() => props.rowData, () => props.open],
    (val) => {
      if (props.open && props.rowData) {
        show(val[0])
      }
    },
    { immediate: true },
  )
</script>
